import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
import LinkTo from '@storybook/addon-links/react';
import {Information, HighlightTitle} from './Information';
import {Link} from '../Link/Link';
import {UsersIllustration} from '../../illustrations';
import * as Illustrations from '../../illustrations';

<Meta
  title="Components/Information"
  component={Information}
  argTypes={{
    illustration: {control: {type: 'select'}, options: Object.keys(Illustrations)},
    title: {control: {type: 'text'}},
    children: {control: {type: 'text'}}
  }}
  args={{
    illustration: 'UsersIllustration',
    title: 'Lorem ipsum.',
    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
  }}
/>

# Information helper

## Usage

Allows to help the user by pushing contextual information.

## General guidance

Located at the top of a page, it helps the user on the page's features. A link guides the user to additional information. *i.e., the help center*

## Playground

Use this playground to test the helper component

<Canvas>
  <Story name="Standard">
    {(args) => {
      const illustrationComponent = React.createElement(Illustrations[args.illustration]);
      return <Information {...args} illustration={illustrationComponent}/>;
    }}
  </Story>
</Canvas>

<ArgsTable story="Standard" />

## Composition

Generally Information contain also link.
Title can also be composed of highlight.

<Canvas>
  <Story name="Composition">
    {(args) => {
      const title = (<>Lorem ipsum <HighlightTitle>dolor</HighlightTitle> sit amet</>)
      return (
        <Information title={title} illustration={<UsersIllustration/>}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          <br/>
          <Link target="_blank" href="https://www.akeneo.com/">Link to related lorem ipsum</Link>
        </Information>
      );
    }}
  </Story>
</Canvas>

## Fit content height

The box fits to the content height

<Canvas>
  <Story name="Fit content height">
    {(args) => {
      const title = 'Lorem ipsum dolor sit amet';
      return (
        <Information title={title} illustration={<UsersIllustration/>}>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </Information>
      );
    }}
  </Story>
</Canvas>

## Related components

<ul>
  <li><LinkTo kind="Components/Helper" story="Standard">Helper</LinkTo></li>
  <li><LinkTo kind="Components/Link" story="Standard">Link</LinkTo></li>
</ul>
